<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    vue生命周期    vue实例从创建到销毁的全过程  钩子函数   8个生命周期函数
    1. 初始化阶段
         beforeCreate()    vue实例仅完成了事件 生命周期函数的初始化
         created()         vue data   el   语法校验
         beforeMount()     挂载前    模板的编译已经完成  但是尚未替换
         mounted()         挂载      模板替换已经实现
    2. 监听阶段
         beforeUpdate()    模板重新渲染前调用的函数
         updated()        模板重新渲染后调用的函数
    3. 销毁阶段
        beforeDestroy
        destroyed        卸载子组件  事件监听

-->
<div id="app">
    <p id="msg">{{message}}</p>
    <input type="text" v-model="message">
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'vue的生命周期'
        },
        beforeCreate() {
            console.log('----------------beforeCreate--------------')
            let p = document.getElementById('msg')
            let val = p.innerText
            console.log('p.innerText:', val)
            console.log('data.message:', this.message)

            // 异步请求   结果  响应式   data 代理没有完成
        },
        created() {
            console.log('----------------created--------------')
            let p = document.getElementById('msg')
            let val = p.innerText
            console.log('p.innerText:', val)
            console.log('data.message:', this.message)
            //  ajax  最早的位置
        },
        beforeMount() {
            console.log('----------------beforeMount--------------')
            let p = document.getElementById('msg')
            let val = p.innerText
            console.log('p.innerText:', val)
        },
        mounted() {
            console.log('----------------mounted--------------')
            let p = document.getElementById('msg')
            let val = p.innerText
            console.log('p.innerText:', val)
        },

        beforeUpdate() {
            console.log('----------------beforeUpdate--------------')
            let p = document.getElementById('msg')
            let val = p.innerText
            console.log('p.innerText:', val)
        },
        updated() {
            console.log('----------------updated--------------')
            let p = document.getElementById('msg')
            let val = p.innerText
            console.log('p.innerText:', val)
        },
        beforeDestroy(){
            console.log('----------beforeDestroy------------')
        },
        destroyed(){
            console.log('----------destroyed------------')
        }
    })
</script>
</body>
</html>